Topic outline

  • Collapse all Expand all

    Resource Plus
    Cambridge Subject XXXX


    • Challenge is to find a way to embed standard resources, giving the appearance that they are live on the page, but then they trigger a video play.

  • Older RP video embed method

    • This works - but if the user triggers the quiz, it auto-refreshes and reduces the height. It's also a cumbersome embed and causes frustration. However, it does constrain the video and H5P interactive video embed so it an acceptable solution.

      However, this method is only satisfactory if we have the items on separate pages - the moment we add more than one - the page load gets too much and the pages become too cumbersome to use.


  • Additional Marine Science embed option

    • Here we prevent the page loading content directly until it is needed, and then deliver it with a modal pop-up. The problem is that if the user clicks off the modal popup the video keeps playing with literally no way to ever stop it other than closing their browser.






  • Best solution for February 2023

    • Need the simplicity of the original method, but preventing video and other media content loading until the user actually wants it.
      The modal window video pop-up is trying to be too clever, and it is fiddly to mess around with.

      Ideally, we need some approach that allows us to load representative images, and then content loads when it is selected. Like the original version, but in a smarter way. The modal windows work in the same way as show/hide content, so we could simply include that on the page, but the same issue will occur - namely the user could start the video playing, then move off elsewhere, or close the show/hide div and it will all keep playing. The original method used iframes which actually disappear/unload once the user chooses a different button option. So one thing to explore further is making use of iframes in a different way...?

    • Research:

      This is the kind of behaviour we want:
      BBC Bitesize - Animal cells - The key features of cells and their functions - OCR 21st Century - GCSE Biology (Single Science) Revision - OCR 21st Century - BBC Bitesize
      - this actually loads a new page depending on your choice - clicking 'revise', 'Video', 'Test' actually loads an entirely different page. Not really an option for th way we are building these.

      However, having lots of these then becomes part of the issue - having multiple videos embedded on one webpage but they suggest using Modal windows that don't pre-load - that's the exact solution I was going for with the latest solution above. It's not ideal.

      Solution has to be to load no content other than optimised images, and then trigger a video play if chosen.

      That means the modal approach *is* the correct one, but I need to implement it better.

    • This is the kind of approach that I'm going for:
      Live Demo: Example of Embedding YouTube Video inside Bootstrap Modal (tutorialrepublic.com)

    • Launch Demo Modal

    • ... but unlike the example page, our video keeps playing when the modal window is closed


    • Next attempt is to use lightbox video embed - but that's not far off what we've already tried.
      I also don't like disabling the modal behaviour so when you click away from the popped-up window you can't close it. That feels broken in itself.

    • This kind of solution is perhaps the best way for us to proceed:
      https://pagespeedchecklist.com/on-demand-embedded-videos

      https://pagespeedchecklist.com/responsive-embedded-videos

      I'll work on something similar to that - with this approach, we have an image that loads to show there is video content, and then that gets replaced with playing video content on the page. If they press another video, that's the user's fault because the other video is still playing.

  • On demand embedded videos


    • This is surely more straightforward isn't it?

      • Have H5P element hidden yet available on the page
      • Have responsive image sitting in the course
      • When clicked, load the h5p object in place of the image

      If you want multiple items on the page - just do the same. As they are all visible, it will work. You're not hiding videos, you're just swapping in/out content.


      1. Load iframe based image
      2. Respond to onClick
      3. Load H5P / Vimeo / Teaching Tool in it's place

  • Method to use


    • Original Vimeo embed:


      show/hide  Salinity and the density of water video transcript
      The average salinity of water in oceans is 35 parts per thousand.

      The salinity of seawater varies from less than 10 ppt in the Baltic Sea…

      …to as high as 280 ppt in the Dead Sea. This investigation uses precise measurements of both the mass and volume of different samples of water of different salinities to calculate the density of these water samples.

      To obtain precise results you must use a balance that measures to at least 0.1 g increments. If more precise balances are available, these will give more precise results.

      The measuring cylinders must be small enough so that the volume of water samples can be measured to 0.1 cm3 increments. Suitable alternative equipment may include 10 cm3 syringes or burettes

      Label one of the measuring cylinders with ’50 ppt salt water’. Label the other measuring cylinder with ‘distilled water’. This will help you to avoid any accidental mixing of the salt water and distilled water which may affect your results.

      Use the ‘salt water’ measuring cylinder to measure exactly 10 cm3 of 50 ppt salt water . Check the level of the meniscus carefully to ensure the volume is accurate.

      Place the beaker on the balance and zero the balance by pressing the tare or zero button.

      Add all the salt water from the measuring cylinder into the beaker – take care not to spill any as this will affect the results.

      Record this mass in a results table.

      Repeat this process at least 2 more times to collect 3 sets of data for the 50 ppt salt water.

      Finally calculate an overall mean for the mass of the 50 ppt sample by adding the three values for each trial and dividing the total by three.

      Then calculate the density of the water by dividing the mean mass of the water sample by the volume, which was 10 cm3.

      Now we will use a combination of the 50 ppt salt water and distilled water to produce samples of different salinities.

      Measure 8 cm3 of 50 ppt salt water using the measuring cylinder labelled to measure this in.

      Then measure 2 cm3 of distilled water using the other measuring cylinder we labelled earlier.

      When added together this will produce a a more dilute solution of salt, with a concentration of 40 ppt.

      Place the beaker on the balance and zero the balance by pressing the tare or zero button.

      Add all the salt water from the first measuring cylinder into the beaker, and all of the distilled water from the second measuring cylinder – taking care not to spill any.

      Record this mass in a results table.

      Repeat this process at least 2 more times to collect 3 sets of data for the 40 ppt salt water…

      … and calculate an overall mean for the mass of the 40 ppt sample, and calculate the density of the water.

      Now we will just use distilled water to produce a sample of 0 ppt.

      Measure 10 cm3 of distilled water using the measuring cylinder labelled to measure this in.

      Place the beaker on the balance and zero the balance by pressing the tare or zero button.

      Add all of the distilled water from the measuring cylinder – taking care not to spill any.

      Record this mass in a results table.

      Repeat this process at least 2 more times to collect 3 sets of data for the 0 ppt salt water.…

      … and calculate an overall mean for the mass of the 0 ppt sample, and calculate the density of the water.

      Different densities of water can result in the formation of layers in seas and oceans. We can show this by colouring samples of 50 ppt water and distilled water and carefully adding them to each other…

      …the distilled water is less dense so this floats on top of the more saline water. Changes in density of water due to salinity or temperature differences can result in the formation of vertical currents where denser more saline water sinks.

      These vertical currents can help to drive the global ocean conveyor of ocean currents around all the oceans.


    • Original H5P embed: - no formatting or constraining of size

    • iframe - 900px wide, max-width 900px, responsive up until that

      H5P items and other videos sit inside that <div>, loaded within, similar to how our previous original Rich Resources items worked.
      Pink and other colours to help work out what is working....



    • Nearly working



      Yet this will work - as it is an external link (to the iFrame).

      Also - can click the 'inner green' as the <div> is also now a hyperlink, but not the inner image itself... yet.
      But we've now added pointer-events: none; to the iframe - which means the div above it does act as a hyperlink, but once clicked, you can't then click as we've disabled it...
      But then, some clever code to switch pointer-events back to auto, means it can work.... and it does, kind of...


    • Working - but only issue now is how to centre the image that is an iframe, and ensure only the image is clickable, not any part of the edge. Currently, when we hide the edge, the item isn't perfectly aligned.